@import '../../variable.less';
@keyframes changeopacity {
  from {
    opacity: 0.99999;
  }
  to {
    opacity: 1;
  }
}
.main {
  width: 100%;
  height: calc(100vh - 32rpx);
  overscroll-behavior: none;
  overflow: hidden;
  -webkit-overflow-scrolling: none;
  padding:0rpx 32rpx 0;
  box-sizing: border-box;
  background-color: #EBDABE;
  &.spring-festival{
    background: url(https://wanhuhealth.oss-cn-beijing.aliyuncs.com/static/note-miniProgram/spring-bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .record-content{
      color:#ffe168;
      .swiper-content{
        color:#ffe168;
      }
    }
  }
  .swiper{
    width: 100%;
    height: 100vh;
  }
}

.loading {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  flex-direction: column;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  .loading-txt {
    font-size: @m-fontsize;
    color: #db1919;
  }
}
.swiper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.swiper-item {
  width: 100%;
  height: 100%;
  white-space: pre-line;
  .audio-wrap{
    position: fixed;
    bottom: 280rpx;
    left:0rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    background-color: rgba(0,0,0,0.2);
    border-radius: 16rpx;
    .image{
      width: 160rpx;
      height: 100rpx;
    }
  }
  .img-shouzhi {
    pointer-events: none;
    position: fixed;
    left:240rpx;
    bottom: 400rpx;
    width: 340rpx;
    height: 340rpx;
    z-index: 1000;
    .image {
      width: 100%;
      height: 100%;
    }
  }
  .img-re{
    pointer-events: none;
    position: fixed;
    bottom: 190rpx;
    left:50%;
    transform: translate(-50%);
    width: 106rpx;
    height: 685rpx;
    z-index: 1000;
    .image {
      width: 100%;
      height: 100%;
    }
  }
}

.fixed-bottom-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10000;
  animation: changeopacity infinite 2s;
  .btn-row{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .btn-item{
      width: calc(50% - 8rpx);
      height: 144rpx;
      line-height: 144rpx;
      border-radius: 72rpx;
      text-align: center;
      color: white;
      font-size: @s-fontsize;
      box-sizing: border-box;
      
      &.info-btn{
        background-color: rgba(0,0,0,0.6);
      }
      &.primary-btn{
        margin: 0;
        background: linear-gradient(180deg, #DC1919 0%, #B11414 80.5%, #B11414 100%);
      }
    }
    
  }
}
.btn-tip{
  width: 100%;
  .tip-txt{
    position: absolute;
    top:0rpx;
  }
  .btn-item{
    width: 100%;
    height: 144rpx;
    line-height: 144rpx;
    border-radius: 72rpx;
    background-color: rgba(0,0,0,0.6);
    text-align: center;
  }
}